<template>
  <div class="easy-container border-bottom">
    <template v-if="!item.deleted">
      <h4>{{ item.title }}</h4>
      <div class="flex align-items-center">
        <router-link :to="`/users/${item.author.id}`" class="link el-link--primary m-r-10">
          {{ item.author.nickname }}
        </router-link>
        &nbsp;
        <timeago2 :date-time="item.created_at" pre-text="发布于 " />
        <span
          v-if="isWebAdmin || isGroupOwner || isGroupAdmin"
          class="m-l-30 link el-link--danger"
          @click="deleteItem"
          v-text="'删除'"
        ></span>
      </div>
      <ckeditor :initial-content="item.content" readonly />
      <div class="info-deep">
        共有{{ item.commentsCount }}条评论，
        <span class="link el-link--primary" @click="handleSee">
        {{ commentBtn }}
      </span>
      </div>
      <comments-plain
        v-if="showComments"
        module="GroupNotice"
        :module-id="item.id"
        :module-author-id="item.author.id"
        class="p-x-16"
      />
    </template>
    <template v-else>
      <div class="info text-center">公告已删除</div>
    </template>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import CommentsPlain from '@/components/comments-plain';

export default {
  name: 'announcement-item',
  components: { CommentsPlain },
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      showComments: false,
    };
  },
  computed: {
    ...mapGetters(['isWebAdmin', 'isGroupOwner', 'isGroupAdmin']),
    commentBtn() {
      if (this.showComments) return '收起';
      else if (this.item.commentsCount) return '查看评论';
      return '我要评论';
    },
  },
  methods: {
    // 删除公告
    deleteItem() {
      this.$msgbox({
        title: '提示',
        message: '确认删除这份公告吗？',
        showCancelButton: true, // 显示取消按钮
        customClass: 'confirm-left',
        confirmButtonText: '确定',
        confirmButtonLoading: false,
        confirmButtonClass: 'el-button--danger',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            Object.assign(instance, {
              confirmButtonLoading: true,
              confirmButtonText: '正在删除...',
            });
            this.$api.groupAnnouncements.delete({
              groupId: this.$route.params.groupId,
              id: this.item.id,
            }).then(() => {
              this.$message.success('删除成功');
              this.$emit('deleted', this.item);
            }).catch(() => {})
              .then(() => done());
          } else done();
        },
      });
    },
    // 查看公告评论/收起
    handleSee() {
      if (!this.showComments) {
        this.$api.groupAnnouncements.show({
          groupId: this.$route.params.groupId,
          id: this.item.id,
        }).then(res => this.$emit('check', res.data, this.item.id))
          .catch(() => this.$emit('check', undefined, this.item.id));
      }
      this.showComments = !this.showComments;
    },
  },
};
</script>

<style></style>
